<style>
/*订单显示*/
.item{ width:100px; height:170px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .tags{width:20px;float:left;text-align:center;}
.item .pic{width:80px; float:right;text-align:center;}
.item .pic img{max-width:80px; max-height:80px;border-radius:5px;}
.item .text{text-align:center;clear:both;}
.clear{clear:both;}

/*控制下拉框样式*/
.layui-collapse .layui-unselect{height:25px;}
.layui-form-select dl{ max-height:160px;}
</style>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">显示区块</label>
		<div class="layui-input-block">
			<input type="checkbox" lay-filter="sa" title="采购" id="caigou" value="caigou">
			<input type="checkbox" lay-filter="sa" title="裁床" id="caichuang" value="caichuang">
			<input type="checkbox" lay-filter="sa" title="车间" id="chejian" value="chejian">
		</div>
	</div>
</form>

<form class="layui-form">
	<div id="listView"><img src="/static/mp/image/loading.gif"></div>
</form>

<script id="listTpl" type="text/html">
{{#  layui.each(d.list, function(k, v){ }}
<fieldset class="layui-elem-field layui-field-title">
	<legend>{{ d.factoryKV[k] }}</legend>
</fieldset>
<div class="layui-collapse" style="margin-bottom:25px;" id="collapse">

	{{#  layui.each(v, function(kk, vv){ }}
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">{{ d.factoryKV[k] }} - {{ d.groupKV[kk] }}</h2>
		<div class="layui-colla-content layui-show">
			
			<!-- 采购 -->
			{{#  if(vv.caigou_orders > 0){ }}
			<div class="layui-colla-item caigou {{# if (d.vals.indexOf('caigou') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">采购 - {{ vv.caigou_orders }}单 - {{ vv.caigou_items }}件</h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.caigou, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>
							
							<select name="factory_outgo_id" lay-filter="factory_outgo_id" data-id="{{ vvv.client_ordernum }}">
									<option value="">--请选择--</option>
									{{#  layui.each(d.factoryOutgoKV, function(fk, fv){ }}
									<option value="{{ fk }}">{{ fv }}</option>
									{{#  }); }}
							</select>

						</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}

			<!-- 裁床 -->
			{{#  if(vv.caichuang_orders > 0){ }}
			<div class="layui-colla-item caichuang {{# if (d.vals.indexOf('caichuang') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">裁床 - {{ vv.caichuang_orders }}单 - {{ vv.caichuang_items }}件</h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.caichuang, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>
							
      							<select name="factory_outgo_id" lay-filter="factory_outgo_id" data-id="{{ vvv.client_ordernum }}">
									<option value="">--请选择--</option>
									{{#  layui.each(d.factoryOutgoKV, function(fk, fv){ }}
									<option value="{{ fk }}">{{ fv }}</option>
									{{#  }); }}
								</select>

						</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}

			<!-- 车间 -->
			{{#  if(vv.chejian_orders > 0){ }}
			<div class="layui-colla-item chejian {{# if (d.vals.indexOf('chejian') == -1) { }} hide {{# } }}">
				<h2 class="layui-colla-title">车间 - {{ vv.chejian_orders }}单 - {{ vv.chejian_items }}件</h2>
				<div class="layui-colla-content layui-show">
					
					{{#  layui.each(vv.chejian, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
						<div class="tags">{{ vvv.tags }}</div>
						<div class="pic"><img src="{{ vvv.pic }}"></div>
						<div class="text"><span class="copy-item">{{ vvv.client_ordernum }}</span><br>{{ vvv.quantity }}件<br>{{ vvv.shipment_time }}<br>
							
							<select name="factory_outgo_id" lay-filter="factory_outgo_id" data-id="{{ vvv.client_ordernum }}">
									<option value="">--请选择--</option>
									{{#  layui.each(d.factoryOutgoKV, function(fk, fv){ }}
									<option value="{{ fk }}">{{ fv }}</option>
									{{#  }); }}
							</select>

						</div>
					</div>
					{{#  }); }}

					<div class="clear"></div>
				</div>
			</div>
			{{#  } }}
				
		</div>
	</div>
	{{#  }); }}

</div>
{{#  }); }}
</script>

{include file="system@block/layui" /}

<script>
layui.use([ 'element', 'layer', 'form', 'cookie', 'laytpl', 'tool'], function() {
	var element = layui.element;
	var layer = layui.layer;
	var $ = layui.jquery;
	var form = layui.form;
	var laytpl = layui.laytpl;
	
	// 默认选择
	var checked = $.cookie('outgo-todo-show-area');
	var vals = checked ? checked.split(',') : [];
	for (var i in vals) {
		$("#"+vals[i]).prop("checked", true);
	}
	console.log('outgoTodoCache:'+vals.join(','));
	
	form.render();
	element.init();
	
 	// 控制显示/隐藏区块
	form.on('checkbox(sa)', function(data) {
		if (data.elem.checked && vals.indexOf(data.value) == -1) {
			vals.push(data.value);
			$(".layui-collapse ."+data.value).show();
		} else {
			vals.pop(data.value);
			$(".layui-collapse ."+data.value).hide();
		}
		console.log(vals.join(','));
		$.cookie('outgo-todo-show-area', vals.join(','), {
			expires : 90
		});
	});

 	// 获取订单
	getOrders();
	function getOrders(){
		$.ajax({
		   type: "POST",
		   url: "{:url('mp/outgo/todo')}",
		   data: "",
		   dataType:"json",
		   success: function(res){
			   var listTpl = $('#listTpl').html();
			   res.data.vals = vals;
			   laytpl(listTpl).render(res.data, function(html){
			   		$('#listView').html(html);
			   });
			   
			   form.render();
			   element.init();
			   
			   // 指定select向上展开，向下会被遮挡
			   $(".layui-form-select dl").css('top',"auto");
			   $(".layui-form-select dl").css('bottom',"28px");
		   }
		});
	}
	
	// 指定外发工厂
	form.on('select(factory_outgo_id)', function(data){
		var clientOrdernum = $(data.elem).attr('data-id');
		var factoryOutgoId = data.value;
		if (factoryOutgoId > 0) {
			$.ajax({
			   type: "POST",
			   url: "{:url('mp/outgo/setFactoryOutgoId', ['_t' => 2])}",
			   data: "client_ordernum="+clientOrdernum+"&factory_outgo_id="+factoryOutgoId,
			   dataType:"json",
			   success: function(res){
				   if (res.code == 1) {
					   layer.msg(res.msg, {icon: 1});
				   } else {
					   layer.msg(res.msg, {icon: 2,anim: 6});
				   }
			   }
			});
		}
		
		return false;
	});
});
</script>